<template>
    <div class="jointlyHandelBtnDiv">
        <el-button type="primary" @click="showJointlyHandleList">会办</el-button>
        <el-dialog :visible.sync="listDialogVisible" width="1000px">
            <avue-crud :data="processList"
                       :option="processOption"
                       :page.sync="processPage"
                       @refresh-change="refreshProcess"
                       @on-load="pageProcess"
                       :table-loading="processLoading">
                <template slot="menuLeft">
                    <el-button type="primary"
                               size="small"
                               icon="el-icon-plus"
                               @click="showAddForm">新增</el-button>
                </template>
                <template slot="deptName" slot-scope="deptNameScope" >
                    <span v-if="deptNameScope.row != null && deptNameScope.row.variables != null">
                      {{deptNameScope.row.variables.JOINTLY_HANDLE_DEPT_NAME}}
                    </span>
                </template>
                <template slot="currentTask" slot-scope="currentTaskScope" >
                    <span v-if="currentTaskScope.row != null && currentTaskScope.row.currentTask != null">
                      {{currentTaskScope.row.currentTask.taskName}}
                    </span>
                </template>
                <template slot-scope="scope"
                          slot="menu">
                    <el-button v-if="scope.row.state == '0'"
                               type="text"
                               icon="el-icon-view"
                               size="mini"
                               plain
                               @click="showCandidate(scope.row,scope.index)">查看办理人
                    </el-button>
                    <el-button v-if="scope.row.state == '0' || scope.row.state == '1'"
                               type="text"
                               icon="el-icon-view"
                               size="mini"
                               plain
                               @click="showHistory(scope.row,scope.index)">查看处理历史
                    </el-button>
                </template>
            </avue-crud>
        </el-dialog>
        <el-dialog title="办理人" :visible.sync="candidateDialogVisible">
            <avue-crud :option="candidateOption"
                       @refresh-change="refreshCandidate"
                       @on-load="getCandidateList"
                       :table-loading="candidateLoading"
                       :data="candidateList">
            </avue-crud>
        </el-dialog>
        <el-dialog :visible.sync="historyDialogVisible">
            <process-handle-history ref="processHandleHistory" :visible="historyDialogVisible" :process-id="currentProcess != null ? currentProcess.processId : null"/>
        </el-dialog>
        <el-dialog :visible.sync="addDialogVisible" width="1000px">
            <el-form :model="addForm" :rules="addFormRules" class="bs-form-no-border" label-width="100px">
                <el-form-item label="会办部门" prop="deptIds">
                    <el-col :span="8">
                        <el-input v-model="deptNames"
                                  :readonly="true" />
                    </el-col>
                    <el-col :span="4"
                            :offset="1">
                        <el-button type="primary"
                                   @click="showDeptSelect"
                                   size="small">选择部门</el-button>
                    </el-col>
                </el-form-item>
            </el-form>
          <dept-check-not-dialog :visible="deptSelectVisible"
                                 first-type="3"
                                 mini-type="3"
                                 @getCheckInfo="selectDept"
                                 @cancel="deptSelectVisible = false"></dept-check-not-dialog>

          <el-row type="flex" justify="center">
                <el-button type="primary" :loading="addDialogBtnLoading" @click="addConfirm" size="small">发起会办</el-button>
                <el-button type="info" :loading="addDialogBtnLoading" @click="addCancel" size="small">取消</el-button>
            </el-row>
        </el-dialog>
        <!--<dept-check :visible="deptSelectVisible" first-type="3" mini-type="3" @getCheckInfo="selectDept" @cancel="deptSelectVisible = false"/>-->
    </div>
</template>

<script>
    import {pageProcess, addProcess, getTaskInfo} from '@/api/activiti/monitor';
    import processHandleHistory from "@/components/activiti/history/processHandleHistory";

    //会办按钮
    export default {
        name: "jointlyHandleBtn",
        components:{
            processHandleHistory
        },
        data(){
            return {
                listDialogVisible: false,
                processList: [],
                processOption: {
                    page: true,
                    addBtn: false,
                    editBtn: false,
                    addRowBtn: false,
                    indexLabel: "序号",
                    index: true,
                    indexWidth: 70,
                    cellBtn: false,
                    delBtn: false,
                    columnBtn: false,
                    refreshBtn: true,
                    filterBtn: false,
                    searchBtn: false,
                    menuWidth: 200,
                    column: [
                        {
                            label: "部门名称",
                            prop: "deptName",
                            slot: true,
                        },
                        {
                            label: "当前任务",
                            prop: "currentTask",
                            slot: true,
                        },
                        {
                            label: '状态',
                            prop: 'state',
                            span: 24,
                            type: 'select',
                            minWidth: 100,
                            dicData: [
                                {
                                    label: '进行中',
                                    value: '0'
                                }, {
                                    label: '已结束',
                                    value: '1'
                                }, {
                                    label: '缺少任务',//'流程未结束，但没有正在办理的任务',
                                    value: '2'
                                }, {
                                    label: '缺少办理人',//'当前任务没有办理人或候选人',
                                    value: '3'
                                }
                            ]
                        },
                    ]
                },
                processPage:{
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 5, // 每页显示多少条,
                    pageSizes: [5, 10, 20, 30, 40, 50, 100],
                    isAsc: false//是否倒序
                },
                processLoading: false,
                currentProcess: null,
                currentTask: null,
                candidateOption: {
                    refreshBtn: true,
                    addBtn: false,
                    editBtn: false,
                    delBtn: false,
                    viewBtn: true,
                    columnBtn: false,
                    menuWidth: 150,
                    column: [
                        {
                            label: '流程id',
                            prop: 'processId',
                            span: 24,
                            hide: true,
                            addDisplay: false
                        },
                        {
                            label: '任务id',
                            prop: 'taskId',
                            span: 24,
                            hide: true,
                            addDisplay: false
                        },
                        {
                            label: '用户id',
                            prop: 'userId',
                            span: 24,
                            minWidth: 50,
                        },
                        {
                            label: '用户名称',
                            prop: 'userName',
                            minWidth: 50,
                            span: 24,
                            addDisplay: false,
                        },
                        {
                            label: '用户类型',
                            prop: 'type',
                            span: 24,
                            minWidth: 50,
                            type: 'select',
                            addDisplay: false,
                            dicData: [
                                {
                                    label: '流程发起人',
                                    value: 'starter'
                                }, {
                                    label: '任务候选人',
                                    value: 'candidate'
                                }, {
                                    label: '签收人',
                                    value: 'assignee'
                                }, {
                                    label: '流程参与者',
                                    value: 'participant'
                                }
                            ]
                        }
                    ]
                },
                candidateList: [],
                candidateDialogVisible: false,
                candidateLoading: false,
                addDialogVisible: false,
                addDialogBtnLoading: false,
                deptSelectVisible: false,
                deptNames: null,
                addForm:{
                    deptIds: null
                },
                addFormRules:{
                    deptIds: [
                        { required: true, message: '请选择会办部门' , trigger: "blur" },
                    ]
                },
                historyDialogVisible: false,
            };
        },
        created() {

        },
        props:{
            processId: {
                type: String,
                required: true
            },
            taskId: {
                type: String,
                required: true
            },
            type: {
                type: String,
                required: true
            },
            businessKey: {
                type: [String, Number],
                required: true
            }
        },
        watch: {
            listDialogVisible(){
                if (this.listDialogVisible) {
                    this.pageProcess(this.processPage);
                }
            },
            candidateDialogVisible(){
                if (this.candidateDialogVisible) {
                    this.getCandidateList();
                }
            },
        },
        methods:{
            showJointlyHandleList() {
                this.listDialogVisible = true;
            },
            refreshProcess({page,searchForm}){
                this.pageProcess(page);
            },
            pageProcess(page){
                //防止首次加载时，请求两次。avue自动请求一次，listDialogVisible变更触发一次
                if (this.processLoading) {
                    return;
                }
                this.processLoading = true;
                this.processPage = page;
                let queryParam = {
                    filterByAdminRole: false,
                    current: this.processPage.currentPage,
                    size: this.processPage.pageSize,
                    needVariables: true,
                    ascs: 'start_time',
                    processKey: 'jointly-handle',
                    stringVariables: 'JOINTLY_HANDLE_PROCESS_ID#' + this.processId
                };
                pageProcess(queryParam)
                    .then(res =>{
                        let data = res.data.data;
                        this.processList = data.records;
                        this.processPage.total = data.total;
                    })
                    .catch(()=>{
                    })
                    .finally(()=>{
                        this.processLoading = false;
                    });
            },
            showCandidate(row,index){
                this.candidateDialogVisible = true;
                this.currentProcess = row;
                this.currentTask = this.currentProcess.currentTask;
            },
            refreshCandidate({page,searchForm}){
                this.getCandidateList();
            },
            getCandidateList() {
                //防止首次加载时，请求两次。avue自动请求一次，candidateDialogVisible变更触发一次
                if (this.candidateLoading) {
                    return;
                }
                this.candidateLoading = true;
                getTaskInfo(this.currentTask.taskId).then((res) => {
                    let task = res.data.data;
                    let candidateList = [];
                    if (task != null) {
                        if (task['assignee'] != null) {
                            candidateList.push(task['assignee']);
                        }
                        if (task['candidateList'] != null && task['candidateList'].length > 0) {
                            candidateList.push.apply(candidateList, task['candidateList']);
                        }
                    }
                    this.candidateList = candidateList;
                }).finally(() => {
                    this.candidateLoading = false;
                });
            },
            showHistory(row, index) {
                this.historyDialogVisible = true;
                this.currentProcess = row;
                this.currentTask = this.currentProcess.currentTask;
            },
            showAddForm(){
                this.addDialogVisible = true;
                this.addDialogBtnLoading = false;
                this.addForm = {};
                this.deptNames = null;
            },
            addConfirm(){
                let params = {
                    processKey: 'jointly-handle',
                    businessKey: this.businessKey,
                    variables: {
                        JOINTLY_HANDLE_TYPE: this.type,
                        JOINTLY_HANDLE_DEPT_IDS: this.addForm.deptIds,
                        JOINTLY_HANDLE_PROCESS_ID: this.processId,
                        JOINTLY_HANDLE_TASK_ID: this.taskId
                    }
                };
                this.addDialogBtnLoading = true;
                addProcess(params).then(response => {
                    if (response.data.code == 0) {
                        this.$notify({
                            title: '成功',
                            message: '提交成功',
                            type: 'success',
                            duration: 2000
                        });
                        this.addDialogVisible = false;
                        this.pageProcess(this.processPage);
                    }
                }).finally(()=>{
                    this.addDialogBtnLoading = false;
                })
            },
            addCancel(){
                this.addDialogVisible = false;
            },
            showDeptSelect(){
                this.deptSelectVisible = true;
            },
            selectDept(deptIds, deptNames) {
                this.deptNames = deptNames;
                this.addForm.deptIds = deptIds;
                this.deptSelectVisible = false;
            },
        }
    }
</script>

<style lang="scss" scoped>
    .jointlyHandelBtnDiv{
        margin-left: 10px;
    }
</style>
